// 清分情况表
<template>
    <div class="pageWrapper">
        <SearchBar class="form" @onSearch="handleSearch('search')" @childFn="resetForm">
            <SearchBarItem label="报表统计时间：">
              <DatePicker type="month" ref="clearDatePicker" :options="options3" v-model="searchData.time" transfer  @on-change="searchTime" style="width: 200px" placeholder="请选择年月"></DatePicker>
            </SearchBarItem>
            <SearchBarItem label="商户名称：">
              <Input type="text" v-model="searchData.merchantName" placeholder="请输入商户名称" clearable />
            </SearchBarItem>
            <SearchBarItem label="业务场景：">
              <Select v-model="searchData.orderSource" placeholder="请选择业务场景" clearable>
                <Option v-for="(item, index) in selectScenario" :key="index" :value="item.key">{{ item.value }}</Option>
              </Select>
            </SearchBarItem>
        </SearchBar>

        <Row class="noRepor" v-if="!fromData.dataList">
            <p>当前月份还未生成报表</p>
            <Button type="primary" @click="handleSearch('click')">点击生成</Button>
        </Row>

        <div v-else>
            <Row class="handleBtn">
                <Authc permissions="trade:settlement:cmb">
                    <Button type="primary" @click="updataClearList" :disabled="isDisabled">更新报表</Button>
                </Authc>
                <Authc permissions="trade:settlement:cmb">
                    <Button type="primary" @click="getClearExport">导出</Button>
                </Authc>
                <Authc permissions="trade:settlement:cmb">
                    <Button type="primary" @click="diffOrderExportBtn">差额订单导出</Button>
                </Authc>
            </Row>

            <Row class="reporBox">
                <Row class="reporHeader">
                    <h3>清分情况表(所有场景)</h3>
                    <Col span="12">报表统计日期：{{ fromData.statisticsTime }}</Col>
                    <Col class="textRight" span="12">报表生成日期：{{ fromData.generationTime }}</Col>
                </Row>
                <Table :columns="costColumn" :data="clearData" border></Table>
                <Page class="pageWrap" :total="fromData.dataList.pagination.total" :current="fromData.dataList.pagination.currentPage" :page-size="fromData.dataList.pagination.pageSize" show-elevator show-total show-sizer @on-change="handlePageChange" @on-page-size-change="handlePageSizeChange"/>
            </Row>
        </div>


    </div>
</template>

<script>
import { Button, DatePicker, Row, Col, Table, Input, Select, Option, Message, Page } from "view-design";
import Authc from "@/components/Authc";
import SearchBar from "@/components/SearchBar";
import { namespace } from '../Module/clearingModule';
import util from "@/utils/util";

export default {
    name: "",
    components: {
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        DatePicker,
        Button,
        Row,
        Col,
        Table,
        Authc,
        Input,
        Select,
        Option,
        Message,
        Page
    },
    data(){
        return {
            isDisabled: false,
          searchData: {},
          selectScenario: [], /** 业务场景 */
          options3: {
              disabledDate (date) {
                let nowTime = new Date()
                let month = nowTime.getMonth() + 1
                let year = nowTime.getFullYear()
                return date && date.valueOf() > new Date(`${year}-${month}`);
            }
          },
            /** 第一个表格配置 **/
            costColumn: [
                {
                    title: '商户名称',
                    key: 'merchantName',
                    align: "center",
                    minWidth: 210
                },
                {
                    title: '商品名称',
                    key: 'productName',
                    align: "center",
                    minWidth: 210
                },
                {
                    title: '场景',
                    key: 'orderSourceCn',
                    align: "center",
                    minWidth: 100,
                },
                {
                    title: '周期',
                    key: 'period',
                    align: "center",
                    minWidth: 100,
                },
                {
                    title: '清分金额(￥)',
                    key: 'clearAmount',
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.clearAmount / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: '商户部分(￥)',
                    key: 'merchant_amount',
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.merchant_amount / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: '平台部分(￥)',
                    key: 'tengyun_amount',
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.tengyun_amount / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: '手续费(￥)',
                    key: 'serviceCharge',
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.serviceCharge / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: '平台应收(￥)',
                    key: 'tengyun_receivable',
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.tengyun_receivable / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: '平台实际入账金额(￥)',
                    key: 'tengyun_actual_entry',
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.tengyun_actual_entry / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: '商户实际入账(￥)',
                    key: 'merchant_actual_entry',
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.merchant_actual_entry / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: '平台差额(￥)',
                    key: 'tengyun_difference',
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.tengyun_difference / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: '商户差额(￥)',
                    key: 'merchant_difference',
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.merchant_difference / 100;
                        return h('span', util.toMoney(item));
                    }
                },
            ],
            currentPage: 1,
            pageSize: 10,
            fromData: {},
            clearData: [] /** list **/
        }
    },
    created () {
        this.handleSearch('defined');
        this.getDictionary();
    },
    methods: {
        /** 导出 */
        async getClearExport () {
            try {
                if (!this.searchData.report_time) {
                    this.$Message.warning('请选择报表时间');
                    return;
                }
                let params = {
                    report_time: this.searchData.report_time
                }
                let res = await this.$store.dispatch(`${namespace}/clearExport`, params);
                util.exportExcle(res, '清分情况表');
            } catch (error) {
                this.$Message.error({
                    content: '导出失败'
                })
            }
        },
        /** 差额订单统计导出 */
        async diffOrderExportBtn () {
            try {
                if (!this.searchData.report_time) {
                    this.$Message.warning('请选择报表时间');
                    return;
                }
                let params = {
                    report_time: this.searchData.report_time
                }
                let res = await this.$store.dispatch(`${namespace}/diffOrderExport`, params);

                util.exportExcle(res, '清分差额订单表');
            } catch (error) {
                this.$Message.error({
                    content: '导出失败'
                })
            }
        },
        // 范围统计
        searchTime (date, type) {
            this.searchData.report_time = date;
        },
        /** 搜索 */
        async handleSearch(type) {
            try {
                if (type === 'defined') {  // 默认初始化
                    var params = {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        // report_time: '2024-05-31'
                        report_time: util.getYearMonth()
                    }
                } else if (type === 'click' || type === 'search') { // 点击生成报表  搜素查询报表
                    if (!this.searchData.report_time) {
                        this.$Message.warning('请选择报表时间');
                        return;
                    }
                    var params = {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }
                }
                this.fromData = {};
                this.clearData = [];
                let res = await this.$store.dispatch(`${namespace}/getClearList`, { ...this.searchData, ...params });
                if (res.data.ret === 0) {
                    let data = res.data.data;
                    if (type !== 'defined' && !data.dataList){
                        this.$Message.warning(`暂无${this.searchData.report_time}${this.searchData.merchantName || ''}报表`);
                        return;
                    }

                    this.fromData = data;
                    this.clearData = data && data.dataList && data.dataList.list || [];
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

        /** 更新 */
        async updataClearList(type) {
            try {
                if (!this.searchData.report_time) {
                    this.$Message.warning('请选择报表时间');
                    return;
                }
                let params = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                }
                this.isDisabled = true;
                let res = await this.$store.dispatch(`${namespace}/updataClearList`, { ...this.searchData, ...params });
                if (res.data.ret === 0) {
                    this.$Message.success({
                        content: '更新成功'
                    });
                    this.isDisabled = false;
                    let data = res.data.data;
                    this.fromData = data;
                    this.clearData = data && data.dataList && data.dataList.list || [];
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

        /** 业务场景 */
        async getDictionary () {
            try {
                let res = await this.$store.dispatch(`${namespace}/getDictionary`);
                if (res.data.ret === 0) {
                    let data = res.data.data;
                    this.selectScenario = data.merchantScenario;
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

        /** 页码切换 */
        async handlePageChange(currentPage) {
            let data = {
                pageSize: this.pageSize,
                currentPage: currentPage
            }
            let res = await this.$store.dispatch(`${namespace}/getClearList`, { ...data, ...this.searchData });
            if (res.data.ret === 0) {
                let data = res.data.data;
                this.fromData = data;
                this.clearData = data && data.dataList && data.dataList.list || [];
            }
        },

        /** 切换每页条数的回调 **/
        async handlePageSizeChange(size){
            let data = {
                currentPage: this.currentPage,
                pageSize: size
            }
            let res = await this.$store.dispatch(`${namespace}/getClearList`, { ...data, ...this.searchData });
            if (res.data.ret === 0) {
                let data = res.data.data;
                this.fromData = data;
                this.clearData = data && data.dataList && data.dataList.list || [];
            }
        },

        resetForm() {
            this.$set(this.searchData, 'merchantName', '');
            this.$set(this.searchData, 'orderSource', '');

            this.$refs["clearDatePicker"].handleClear();
        }
    }
};
</script>
<style scoped>
.pageWrapper {
    padding: 10px;
}
.pageWrapper >>> .ivu-date-picker .ivu-picker-panel-body {
    display: block !important;
}
.form,
.handleBtn,
.reporBox {
    padding: 10px;
    background-color: #fff;
}
.handleBtn {
    margin-bottom: 10px;
}
.noRepor {
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.reporHeader {
    margin-bottom: 10px;
}
.reporHeader h3 {
    height: 50px;
    line-height: 50px;
    font-size: 32px;
    text-align: center;
    margin-bottom: 10px;
}
.textRight {
    text-align: right;
}
.reporBox .ivu-table-wrapper {
    margin-bottom: 20px;
}
.pageWrap {
    text-align: right;
}
</style>
